// Core mixins 核心代码函数
// -1.prefixer             浏览器厂商前缀设定
// -2.transition           动画模块 
// -3.transform            动画模块 
// -4.box-sizing           盒模型组织形式 
// -5.box-shadow           盒子阴影模块
// -6.border-radius        圆角模块
// -7.background-size      背景图像的尺寸
// -8.text-indent          文字缩进
// -9.triangle             绘制三角形
// -10.clear               清除浮动模块
// -10.2 clearfix          清除浮动升级版
// -11.box-center          盒子水平居中
// -12.line-height-center  单行文本垂直居中
// -13.absolute-center     已知元素宽高垂直居中
// -14.transform-center    不固定宽高垂直居中
// 
// -最后修改时间：2016.7.7
// ----------------------------------------------------

// 1.prefixer 浏览器前缀设定模块
$prefix-webkit: true !default;      // 谷歌内核浏览器
$prefix-mozilla: true !default;     // 火狐浏览器
$prefix-microsoft: false !default;  // IE浏览器
$prefix-opera: false !default;      // opera浏览器
$prefix-defa: true !default;        // 通用版

@mixin prefixer ($property, $value) {
    @if $prefix-webkit == true {
      -webkit-#{$property}: $value;
    }
    @if $prefix-mozilla == true {
      -moz-#{$property}: $value;
    }
    @if $prefix-microsoft == true {
      -ms-#{$property}: $value;
    }
    @if $prefix-opera == true {
      -o-#{$property}: $value;
    }
    @if $prefix-defa == true {
      #{$property}: $value;
    }
    @else {
      @warn "Unrecognized prefix: #{$prefix}";
    }
}

// 2.transition 动画模块  
$transition-property:all !default;               //默认执行动画属性
$transition-duration:0.3s !default;              //默认动画时间
$transition-timing-function:ease-out !default;   //默认动画效果

@mixin transition($value:$transition-property $transition-duration $transition-timing-function){
    @include prefixer(transition, $value);
}

// 3.transform 动画模块 
@mixin transform($value){
    @include prefixer(transform, $value);
}

// 4.box-sizing  盒模型组织形式 
$box-sizing-type:border-box !default; // border-box | padding-box | content-box

@mixin box-sizing($type:$box-sizing-type){
    @include prefixer(box-sizing, $type);
}

// 5.box-shadow 盒子阴影模块
// 阴影模块 用法：@include box-shadow(1px 1px 5px #000);
@mixin box-shadow($shadow-value){
    @include prefixer(box-shadow,$shadow-value);
}

// 6.border-radius 圆角模块
$border-radius-value:5px !default;
@mixin border-radius($border-radius-value:5px){
    @include prefixer(border-radius, $border-radius-value);
}

// 7.background-size 背景图像的尺寸 四种参数：length|percentage|cover|contain 比如参数为 cover设置滚动时背景图片位置不变
@mixin background-size($bg-size:100% 100%){
    @include prefixer(background-size,$bg-size);
}

// 8.text-indent 默认为：-99999px 隐藏文字
@mixin text-indent($text-indent-value:-99999px){
    text-indent:$text-indent-value;
}

// 9.triangle 绘制三角形
@mixin triangle($direction, $size, $borderColor){
    width:0;
    height:0;
    display:block;
    border:$size solid transparent;
    //判断三角形箭头的方向 共四个值：top | right | bottom | left
    @if $direction == top {
      border-bottom-color:$borderColor;
    } 
    @else if $direction == right {
      border-left-color:$borderColor;
    } 
    @else if $direction == bottom {
      border-top-color:$borderColor;
    } 
    @else if $direction == left {
      border-right-color:$borderColor;
    }
}

// 10.clear 清除浮动模块
@mixin clear{
    &:after{
        content: "";
        height: 0;
        display: block;
        clear: both;
        visibility: hidden;
    }
}

// 10.2 clearfix 清除浮动升级版 IE6+
@mixin clearfix{
    &:before,
    &:after{
      display:table;
    }
    &:after{
      clear:both;
    }
}

// 11.box-center 盒子水平居中
@mixin box-center($box-width:100%){
    width:$box-width;
    margin:0 auto;
}

// 12.line-height-center 单行文本 垂直居中
@mixin line-height-center($box-height){
    height:$box-height;
    line-height: $box-height;
    text-align:center;
}

// 13.absolute-center 已知元素宽高垂直居中
@mixin absolute-center($box-width,$box-height){
    width:$box-width;
    height:$box-height;
    position: absolute;
    top:50%;
    left:50%;
    margin-top: -($box-height / 2);
    margin-left: -($box-width / 2);
}

// 14.transform-center 不固定宽高垂直居中 IE9+
@mixin transform-center{
    position: absolute;
    top:50%;
    left:50%;
    @include transform(translate(-50%,-50%));
}

// 15. Animations
// Animations
@mixin animation($animation-value) {
    @include prefixer(animation,$animation-value);
}

//垂直居中高级版

@mixin center($width: null, $height: null) {
    position: absolute;
    top: 50%;
    left: 50%;

    @if not $width and not $height {
        transform: translate(-50%, -50%);
    } @else if $width and $height {
        width: $width;
        height: $height;
        margin: -($width / 2) #{0 0} -($height / 2);
    } @else if not $height {
        width: $width;
        margin-left: -($width / 2);
        transform: translateY(-50%);
    } @else {
        height: $height;
        margin-top: -($height / 2);
        transform: translateX(-50%);
    }
}